import React, { useEffect, useState } from 'react'

export default function MyComponent() {
    const [visible,setVisible]=useState(false);
  return (
    <>
     {visible&&<MyChildComponent/>}
     <button onClick={()=>setVisible(!visible)}>Toggle Child component visibility</button>
    </>
  )
}

const MyChildComponent=()=>{
    useEffect(()=>{
        console.log('mounted')
        return ()=>{
            console.log('unmount')
        }
    })
    return (
        <div>
            MyChildComponent
        </div>
    )
}